<!DOCTYPE html>
<html lang="zh-CN">
<head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
</script>
<meta charset="utf-8" />
<title>美站库 炫美网站大全</title>
<link rel="stylesheet" type="text/css" href="images/index.css" />
</head>
<body>
<div id="header">
	<div id="top" class="auto">
		<div class="logo">
			<h1>
				<img src="images/logo.png" />
				<span>炫美网站大全</span>
			</h1>
		</div>
		<div class="serach">
			<form>
				<input id="searchText" class="text" type="text"/>
				<input id="searchButton" class="submit"  type="button"   value="搜索"  />
			</form>
		</div>
	</div>
	<div id="nav" class="auto">
		<ul>
			<li><a href="#">首页</a></li>
			<li><a href="#">提交站点</a></li>
		</ul>
	</div>
	<div id="runplay" class="auto">
		<div class="left">
			<a href="#"><img src="images/img1.jpg" /></a>
		</div>
		<div class="right">
			<dl>
				<dt id="runplayH">炫美网站，尽在美站库</dt>
				<dd class="txt" id="rate">本网站收集互联网上各种炫美网站....</dd>
				<dd class="btn">
					<a href="#">查看更多</a>
				</dd>
			</dl>
		</div>
	</div>
</div>
<div id="main">
	<div id="main1"> 
		<div id="wrap">
			<div id="leftBody">
				<div class="leftDiv1">
					<h2>美站库</h2>
					<p>美站库是<a href="http://www.sifangku.com" target="_blank">私房库</a>视频html课程中的第一个项目实战课！</p>
				</div>
				<div class="leftDiv2">
					<h2>炫美站点</h2>
					<ul>
						<li>
							<a href="https://movie.douban.com/subject/27622447/"><img src="https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2530599636.webp" height="125px" />
							<p>小偷家族</p>
						</li>
						<li>
							<a href="https://movie.douban.com/subject/30331149/"><img src="https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2544313786.webp" height="125px" / >
							<p>白蛇：缘起</p>
						</li>
						<li>
							<a href="https://movie.douban.com/subject/27082461/"><img src="https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2520170117.webp" height="125px" />
							<p>三次元女友</p>
						</li>
						<li>
							<a href="https://movie.douban.com/subject/27119586/"><img src="https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2546961193.webp" height="125px" />
							<p>谁先爱上他的</p>
						</li>
						<li>
							<a href="https://movie.douban.com/subject/30377703/"><img src="https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2542268337.webp" height="125px" />
							<p>来电狂响</p>
						</li>
					</ul>
				</div>
				<div class="leftDiv3">
					<a href="#">查看更多</a>
				</div>
		</div>
			<div id="rightBody">
				<div class="rightDiv1">
					<h2>酷文</h2>
					<ul>
						<li>
							<h3><a href="#" target="_blank">随便写点什么</a></h3>
							<p>随便写的随便写的随便写的随便写的随便写的随便写的...</p>
						</li>
						<li>
							<h3><a href="#" target="_blank">随便写点什么</a></h3>
							<p>随便写的随便写的随便写的随便写的随便写的随便写的...</p>
						</li>
						<li>
							<h3><a href="#" target="_blank">随便写点什么</a></h3>
							<p>随便写的随便写的随便写的随便写的随便写的随便写的...</p>
						</li>
					</ul>
				</div>
				<div class="rightDiv2">
					<dl class="dl1">
						<dt><a href="#">随便写点</a></dt>
						<dd>随便写点</dd>
					</dl>
					<dl class="dl2">
						<dt><a href="#">随便写点</a></dt>
						<dd>随便写点</dd>
					</dl>
				</div>
			</div>
		</div>
	</div>
</div>
<div id="footer">
	<p class="p1">
		<a href="#" target="_blank">首页</a>
		<a href="#" target="_blank">美站</a>
		<a href="#" target="_blank">酷文</a>
		<a class="last" href="#" target="_blank">联系我们</a>
	</p>
	<p>
		Copyright (c) 2014 | <a href="http://www.sifangku.com" target="_blank">私房库</a>
	</p>
</div>
</body>
</div>

<script>
	$(document).ready(function(){


	var ajaxData = [];
	var titles=[];
		
		$.ajax({url:"data/douban300.json",
		
			success:function(result){
			ajaxData=result;
			$("#rsCount").html("ajax访问成功");
			//alert(result.subjects[2].title);
			
			//alert(result.subjects.length);
			var i=0;
			for(i=0;i<ajaxData.subjects.length;i++)
			{
				titles.push(ajaxData.subjects[i].title);
			}
	
	}});	
			
	$( "#searchText" ).autocomplete({
      source: titles
    });

	$("#searchButton").click(function(){
		var usrIp=$("#searchText").val();
		$("#runplayH").html("您刚输入: "+usrIp);
		alert(usrIp);
			
			
		//反查用户选择的电影名称，查评分rate，查影片封面cover
			
			var rate;
			var cover;
			for (i=0;i<ajaxData.subjects.length;i++)
				{
					if(ajaxData.subjects[i].title==usrIp)
					{
						rate=ajaxData.subjects[i].rate;
						cover=ajaxData.subjects[i].cover;
						$("#rate").html("电影评分为: "+rate);
						$("#titleOne").html(ajaxData.subjects[i].title+"电影评分为: "+rate);
						$("#imgOne").attr('src', cover);
			
			return;
				}
			}
			
			
			
	 });
 });
 </script>


</html>